<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-calendar"></i> 创建角色
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-row :gutter="30">
                <el-col :span="18">
                    <el-card class="box-descri" style="min-height: 620px">
                        <div slot="header" class="clearfix">
                            <span>角色描述</span>
                        </div>
                        <div class="form-box">
                            <el-form ref="form" :model="ruleForm">
                                <el-form-item label="角色名称">
                                    <el-input v-model="ruleForm.c_name"></el-input>
                                </el-form-item>
                                <el-form-item label="性别">
                                    <el-input v-model="ruleForm.sex"></el-input>
                                </el-form-item>
                                <el-form-item label="年龄">
                                    <el-input v-model="ruleForm.age"></el-input>
                                </el-form-item>
                                <el-form-item label="时代">
                                    <el-input v-model="ruleForm.time"></el-input>
                                </el-form-item>
                                <el-form-item label="住地">
                                    <el-input v-model="ruleForm.resident"></el-input>
                                </el-form-item>
                                <el-form-item label="故乡">
                                    <el-input v-model="ruleForm.home"></el-input>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card class="box-card" style="min-height: 620px">
                        <div slot="header" class="clearfix">
                            <span>角色属性</span>
                        </div>
                        <el-col span="8">
                            <div class="form-box">
                                <el-form ref="form" :model="ruleForm">
                                    <el-form-item label="力量">
                                        <el-input-number v-model="ruleForm.STR" @change="handleChange" :min="0"
                                                         :max="100" label="力量"></el-input-number>
                                    </el-form-item>
                                    <el-form-item label="体质">
                                        <el-input-number v-model="ruleForm.CON" @change="handleChange" :min="0"
                                                         :max="100" label="体质"></el-input-number>
                                    </el-form-item>
                                    <el-form-item label="体型">
                                        <el-input-number v-model="ruleForm.SIZ" @change="handleChange" :min="0"
                                                         :max="100" label="体型"></el-input-number>
                                    </el-form-item>
                                    <el-form-item label="敏捷">
                                        <el-input-number v-model="ruleForm.DEX" @change="handleChange" :min="0"
                                                         :max="100" label="敏捷"></el-input-number>
                                    </el-form-item>
                                    <el-form-item label="外貌">
                                        <el-input-number v-model="ruleForm.APP" @change="handleChange" :min="0"
                                                         :max="100" label="外貌"></el-input-number>
                                    </el-form-item>
                                    <el-form-item label="智力">
                                        <el-input-number v-model="ruleForm.INT" @change="handleChange" :min="0"
                                                         :max="100" label="智力"></el-input-number>
                                    </el-form-item>
                                    <el-form-item label="意志">
                                        <el-input-number v-model="ruleForm.POW" @change="handleChange" :min="0"
                                                         :max="100" label="意志"></el-input-number>
                                    </el-form-item>
                                    <el-form-item label="教育">
                                        <el-input-number v-model="ruleForm.EDU" @change="handleChange" :min="0"
                                                         :max="100" label="教育"></el-input-number>
                                    </el-form-item>
                                    <el-form-item label="幸运">
                                        <el-input-number v-model="ruleForm.LUCK" @change="handleChange" :min="0"
                                                         :max="100" label="幸运"></el-input-number>
                                    </el-form-item>
                                </el-form>
                                总数值:{{ this.ruleForm.SUM }}
                                <br>
                                <br>
                                <el-button type="primary" @click="randomCharacter">随机属性</el-button>
                                <br>
                                <br>
                            </div>
                        </el-col>
                    </el-card>
                </el-col>
                <el-col :span="24">
                    <el-card class="card-s" style="margin-top: 20px;margin-bottom:20px;width: 1240px">
                        <div slot="header" class="clearfix">
                            <span>人物技能</span>
                            <span style="float: right">可分配本职技能点:{{ this.ruleForm.BZ_point }}</span>
                            <br>
                            <br>
                            <span style="float: right">可分配兴趣技能点:{{ this.ruleForm.XQ_point }}</span>
                        </div>
                        <div>
                            <el-tabs type="border-card" v-model="activate_name" @tab-click="handleTabsClick">
                                <el-tab-pane label="交流技能" name="communicate">
                                    <el-table :data="table_data" style="width: 100%">
                                        <el-table-column align="middle" prop="name" label="技能名称"
                                                         width="230"></el-table-column>
                                        <el-table-column align="middle" prop="numDefault" label="初始值"
                                                         width="230"></el-table-column>
                                        <el-table-column align="middle" label="职业数值" width="230">
                                            <template scope="scope">
                                                <el-input-number v-model="scope.row.numPro" @change="handleChange"
                                                                 :min="0"
                                                                 :max="100" label="职业数值"></el-input-number>
                                            </template>
                                        </el-table-column>
                                        <el-table-column align="middle" label="兴趣数值" width="230">
                                            <template scope="scope">
                                                <el-input-number v-model="scope.row.numHobby" @change="handleChange"
                                                                 :min="0"
                                                                 :max="100" label="兴趣数值"></el-input-number>
                                            </template>
                                        </el-table-column>
                                        <el-table-column align="middle" label="成长数值" width="230">
                                            <template scope="scope">
                                                <el-input-number v-model="scope.row.numLearn" @change="handleChange"
                                                                 :min="0"
                                                                 :max="100" label="成长数值"></el-input-number>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </el-tab-pane>
                                <el-tab-pane label="探索技能" name="search">
                                    <el-table :data="table_data" style="width: 100%">
                                        <el-table-column align="middle" prop="name" label="技能名称"
                                                         width="230"></el-table-column>
                                        <el-table-column align="middle" prop="numDefault" label="初始值"
                                                         width="230"></el-table-column>
                                        <el-table-column align="middle" label="职业数值" width="230">
                                            <template scope="scope">
                                                <el-input-number v-model="scope.row.numPro" @change="handleChange"
                                                                 :min="0"
                                                                 :max="100" label="职业数值"></el-input-number>
                                            </template>
                                        </el-table-column>
                                        <el-table-column align="middle" label="兴趣数值" width="230">
                                            <template scope="scope">
                                                <el-input-number v-model="scope.row.numHobby" @change="handleChange"
                                                                 :min="0"
                                                                 :max="100" label="兴趣数值"></el-input-number>
                                            </template>
                                        </el-table-column>
                                        <el-table-column align="middle" label="成长数值" width="230">
                                            <template scope="scope">
                                                <el-input-number v-model="scope.row.numLearn" @change="handleChange"
                                                                 :min="0"
                                                                 :max="100" label="成长数值"></el-input-number>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </el-tab-pane>
                                <el-tab-pane label="运动技能" name="move">
                                    <el-table :data="table_data" style="width: 100%">
                                        <el-table-column align="middle" prop="name" label="技能名称"
                                                         width="230"></el-table-column>
                                        <el-table-column align="middle" prop="numDefault" label="初始值"
                                                         width="230"></el-table-column>
                                        <el-table-column align="middle" label="职业数值" width="230">
                                            <template scope="scope">
                                                <el-input-number v-model="scope.row.numPro" @change="handleChange"
                                                                 :min="0"
                                                                 :max="100" label="职业数值"></el-input-number>
                                            </template>
                                        </el-table-column>
                                        <el-table-column align="middle" label="兴趣数值" width="230">
                                            <template scope="scope">
                                                <el-input-number v-model="scope.row.numHobby" @change="handleChange"
                                                                 :min="0"
                                                                 :max="100" label="兴趣数值"></el-input-number>
                                            </template>
                                        </el-table-column>
                                        <el-table-column align="middle" label="成长数值" width="230">
                                            <template scope="scope">
                                                <el-input-number v-model="scope.row.numLearn" @change="handleChange"
                                                                 :min="0"
                                                                 :max="100" label="成长数值"></el-input-number>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </el-tab-pane>
                                <el-tab-pane label="技艺技能" name="skill">
                                    <el-table :data="table_data" style="width: 100%">
                                        <el-table-column align="middle" prop="name" label="技能名称"
                                                         width="230"></el-table-column>
                                        <el-table-column align="middle" prop="numDefault" label="初始值"
                                                         width="230"></el-table-column>
                                        <el-table-column align="middle" label="职业数值" width="230">
                                            <template scope="scope">
                                                <el-input-number v-model="scope.row.numPro" @change="handleChange"
                                                                 :min="0"
                                                                 :max="100" label="职业数值"></el-input-number>
                                            </template>
                                        </el-table-column>
                                        <el-table-column align="middle" label="兴趣数值" width="230">
                                            <template scope="scope">
                                                <el-input-number v-model="scope.row.numHobby" @change="handleChange"
                                                                 :min="0"
                                                                 :max="100" label="兴趣数值"></el-input-number>
                                            </template>
                                        </el-table-column>
                                        <el-table-column align="middle" label="成长数值" width="230">
                                            <template scope="scope">
                                                <el-input-number v-model="scope.row.numLearn" @change="handleChange"
                                                                 :min="0"
                                                                 :max="100" label="成长数值"></el-input-number>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </el-tab-pane>
                                <el-tab-pane label="战斗技能" name="fight">
                                    <el-table :data="table_data" style="width: 100%">
                                        <el-table-column align="middle" prop="name" label="技能名称"
                                                         width="230"></el-table-column>
                                        <el-table-column align="middle" prop="numDefault" label="初始值"
                                                         width="230"></el-table-column>
                                        <el-table-column align="middle" label="职业数值" width="230">
                                            <template scope="scope">
                                                <el-input-number v-model="scope.row.numPro" @change="handleChange"
                                                                 :min="0"
                                                                 :max="100" label="职业数值"></el-input-number>
                                            </template>
                                        </el-table-column>
                                        <el-table-column align="middle" label="兴趣数值" width="230">
                                            <template scope="scope">
                                                <el-input-number v-model="scope.row.numHobby" @change="handleChange"
                                                                 :min="0"
                                                                 :max="100" label="兴趣数值"></el-input-number>
                                            </template>
                                        </el-table-column>
                                        <el-table-column align="middle" label="成长数值" width="230">
                                            <template scope="scope">
                                                <el-input-number v-model="scope.row.numLearn" @change="handleChange"
                                                                 :min="0"
                                                                 :max="100" label="成长数值"></el-input-number>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </el-tab-pane>
                                <el-tab-pane label="医疗技能" name="medical">
                                    <el-table :data="table_data" style="width: 100%">
                                        <el-table-column align="middle" prop="name" label="技能名称"
                                                         width="230"></el-table-column>
                                        <el-table-column align="middle" prop="numDefault" label="初始值"
                                                         width="230"></el-table-column>
                                        <el-table-column align="middle" label="职业数值" width="230">
                                            <template scope="scope">
                                                <el-input-number v-model="scope.row.numPro" @change="handleChange"
                                                                 :min="0"
                                                                 :max="100" label="职业数值"></el-input-number>
                                            </template>
                                        </el-table-column>
                                        <el-table-column align="middle" label="兴趣数值" width="230">
                                            <template scope="scope">
                                                <el-input-number v-model="scope.row.numHobby" @change="handleChange"
                                                                 :min="0"
                                                                 :max="100" label="兴趣数值"></el-input-number>
                                            </template>
                                        </el-table-column>
                                        <el-table-column align="middle" label="成长数值" width="230">
                                            <template scope="scope">
                                                <el-input-number v-model="scope.row.numLearn" @change="handleChange"
                                                                 :min="0"
                                                                 :max="100" label="成长数值"></el-input-number>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </el-tab-pane>
                                <el-tab-pane label="知识技能" name="knowledge">
                                    <el-table :data="table_data" style="width: 100%">
                                        <el-table-column align="middle" prop="name" label="技能名称"
                                                         width="230"></el-table-column>
                                        <el-table-column align="middle" prop="numDefault" label="初始值"
                                                         width="230"></el-table-column>
                                        <el-table-column align="middle" label="职业数值" width="230">
                                            <template scope="scope">
                                                <el-input-number v-model="scope.row.numPro" @change="handleChange"
                                                                 :min="0"
                                                                 :max="100" label="职业数值"></el-input-number>
                                            </template>
                                        </el-table-column>
                                        <el-table-column align="middle" label="兴趣数值" width="230">
                                            <template scope="scope">
                                                <el-input-number v-model="scope.row.numHobby" @change="handleChange"
                                                                 :min="0"
                                                                 :max="100" label="兴趣数值"></el-input-number>
                                            </template>
                                        </el-table-column>
                                        <el-table-column align="middle" label="成长数值" width="230">
                                            <template scope="scope">
                                                <el-input-number v-model="scope.row.numLearn" @change="handleChange"
                                                                 :min="0"
                                                                 :max="100" label="成长数值"></el-input-number>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </el-tab-pane>
                            </el-tabs>
                        </div>

                    </el-card>
                </el-col>

                <div align="center">
                    <el-button type="primary" @click="onSubmit">上传</el-button>
                </div>
                <!--                <el-col span="16">-->
                <!--                    <p>角色简介：</p>-->
                <!--                    <div class="form-box">-->
                <!--                        <el-form ref="form" :model="ruleForm" >-->
                <!--                            <el-form-item label="角色名称">-->
                <!--                                <el-input v-model="ruleForm.c_name"></el-input>-->
                <!--                            </el-form-item>-->
                <!--                            <div v-for="(item, index) in ruleForm.desc_form">-->
                <!--                                {{item.descri}}-->
                <!--                                <el-form-item :label="item.name">-->
                <!--                                    <input v-model = "ruleForm.desc_form[index].content">-->
                <!--                                </el-form-item>-->
                <!--                            </div>-->
                <!--                        </el-form>-->
                <!--                    </div>-->
                <!--                </el-col>-->

            </el-row>
        </div>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    data() {
        return {
            ruleForm: {

                uid: localStorage.getItem('uid'),
                c_name: '',
                home: "",
                resident: "",
                sex: "",
                time: "",
                age:"",
                STR: 0,
                CON: 0,
                SIZ: 0,
                DEX: 0,
                APP: 0,
                INT: 0,
                POW: 0,
                EDU: 0,
                LUCK: 0,
                SUM: 0,
                attribute_list:[],
                ability_list:[],
                skill: {
                    communicate: [{
                        name: '信用评级',
                        numDefault: 0,
                        numPro: 0,
                        numHobby: 0,
                        numLearn: 0
                    },
                        {
                            name: '魅惑',
                            numDefault: 15,
                            numPro: 0,
                            numHobby: 0,
                            numLearn: 0
                        },
                        {
                            name: '话术',
                            numDefault: 5,
                            numPro: 0,
                            numHobby: 0,
                            numLearn: 0
                        },
                        {
                            name: '恐吓',
                            numDefault: 15,
                            numPro: 0,
                            numHobby: 0,
                            numLearn: 0
                        },
                        {
                            name: '说服',
                            numDefault: 10,
                            numPro: 0,
                            numHobby: 0,
                            numLearn: 0
                        },
                        {
                            name: '心理学',
                            numDefault: 10,
                            numPro: 0,
                            numHobby: 0,
                            numLearn: 0
                        }],
                    search: [{
                        name: '估价',
                        numDefault: 5,
                        numPro: 0,
                        numHobby: 0,
                        numLearn: 0
                    },
                        {
                            name: '乔装',
                            numDefault: 5,
                            numPro: 0,
                            numHobby: 0,
                            numLearn: 0
                        },
                        {
                            name: '潜行',
                            numDefault: 20,
                            numPro: 0,
                            numHobby: 0,
                            numLearn: 0
                        },
                        {
                            name: '追踪',
                            numDefault: 10,
                            numPro: 0,
                            numHobby: 0,
                            numLearn: 0
                        },
                        {
                            name: '侦查',
                            numDefault: 25,
                            numPro: 0,
                            numHobby: 0,
                            numLearn: 0
                        },
                        {
                            name: '聆听',
                            numDefault: 20,
                            numPro: 0,
                            numHobby: 0,
                            numLearn: 0
                        },
                        {
                            name: '读唇',
                            numDefault: 1,
                            numPro: 0,
                            numHobby: 0,
                            numLearn: 0
                        },
                        {
                            name: '人类学',
                            numDefault: 1,
                            numPro: 0,
                            numHobby: 0,
                            numLearn: 0
                        }],
                    move: [{
                        name: '攀爬',
                        numDefault: 20,
                        numPro: 0,
                        numHobby: 0,
                        numLearn: 0
                    },
                        {
                            name: '跳跃',
                            numDefault: 20,
                            numPro: 0,
                            numHobby: 0,
                            numLearn: 0
                        },
                        {
                            name: '骑乘',
                            numDefault: 5,
                            numPro: 0,
                            numHobby: 0,
                            numLearn: 0
                        },
                        {
                            name: '游泳',
                            numDefault: 20,
                            numPro: 0,
                            numHobby: 0,
                            numLearn: 0
                        },
                        {
                            name: '潜水',
                            numDefault: 1,
                            numPro: 0,
                            numHobby: 0,
                            numLearn: 0
                        }],
                    skill: [{
                        name: '妙手',
                        numDefault: 10,
                        numPro: 0,
                        numHobby: 0,
                        numLearn: 0
                    },
                        {
                            name: '锁匠',
                            numDefault: 1,
                            numPro: 0,
                            numHobby: 0,
                            numLearn: 0
                        },
                        {
                            name: '电气维修',
                            numDefault: 10,
                            numPro: 0,
                            numHobby: 0,
                            numLearn: 0
                        },
                        {
                            name: '机械维修',
                            numDefault: 10,
                            numPro: 0,
                            numHobby: 0,
                            numLearn: 0
                        },
                        {
                            name: '导航',
                            numDefault: 10,
                            numPro: 0,
                            numHobby: 0,
                            numLearn: 0
                        },
                        {
                            name: '汽车驾驶',
                            numDefault: 20,
                            numPro: 0,
                            numHobby: 0,
                            numLearn: 0
                        },
                        {
                            name: '操作重型机械',
                            numDefault: 1,
                            numPro: 0,
                            numHobby: 0,
                            numLearn: 0
                        },
                        {
                            name: '驯兽',
                            numDefault: 5,
                            numPro: 0,
                            numHobby: 0,
                            numLearn: 0
                        },
                        {
                            name: '计算机使用',
                            numDefault: 5,
                            numPro: 0,
                            numHobby: 0,
                            numLearn: 0
                        }],
                    fight: [{
                        name: '闪避',
                        numDefault: 20,
                        numPro: 0,
                        numHobby: 0,
                        numLearn: 0
                    },
                        {
                            name: '投掷',
                            numDefault: 20,
                            numPro: 0,
                            numHobby: 0,
                            numLearn: 0
                        },
                        {
                            name: '爆破',
                            numDefault: 1,
                            numPro: 0,
                            numHobby: 0,
                            numLearn: 0
                        },
                        {
                            name: '炮术',
                            numDefault: 1,
                            numPro: 0,
                            numHobby: 0,
                            numLearn: 0
                        },
                        {
                            name: '格斗',
                            numDefault: 20,
                            numPro: 0,
                            numHobby: 0,
                            numLearn: 0
                        },
                        {
                            name: '射击',
                            numDefault: 20,
                            numPro: 0,
                            numHobby: 0,
                            numLearn: 0
                        }],
                    medical: [{
                        name: '急救',
                        numDefault: 30,
                        numPro: 0,
                        numHobby: 0,
                        numLearn: 0
                    },
                        {
                            name: '医学',
                            numDefault: 1,
                            numPro: 0,
                            numHobby: 0,
                            numLearn: 0
                        },
                        {
                            name: '精神分析',
                            numDefault: 1,
                            numPro: 0,
                            numHobby: 0,
                            numLearn: 0
                        },
                        {
                            name: '催眠',
                            numDefault: 1,
                            numPro: 0,
                            numHobby: 0,
                            numLearn: 0
                        }],
                    knowledge: [{
                        name: '会计',
                        numDefault: 5,
                        numPro: 0,
                        numHobby: 0,
                        numLearn: 0
                    },
                        {
                            name: '法律',
                            numDefault: 5,
                            numPro: 0,
                            numHobby: 0,
                            numLearn: 0
                        },
                        {
                            name: '历史',
                            numDefault: 5,
                            numPro: 0,
                            numHobby: 0,
                            numLearn: 0
                        },
                        {
                            name: '考古学',
                            numDefault: 1,
                            numPro: 0,
                            numHobby: 0,
                            numLearn: 0
                        },
                        {
                            name: '自然学',
                            numDefault: 10,
                            numPro: 0,
                            numHobby: 0,
                            numLearn: 0
                        },
                        {
                            name: '神秘学',
                            numDefault: 5,
                            numPro: 0,
                            numHobby: 0,
                            numLearn: 0
                        },
                        {
                            name: '电子学',
                            numDefault: 1,
                            numPro: 0,
                            numHobby: 0,
                            numLearn: 0
                        },
                        {
                            name: '克苏鲁神话',
                            numDefault: 0,
                            numPro: 0,
                            numHobby: 0,
                            numLearn: 0
                        }]
                },
                desc_form: [
                    {
                        descriptionId: 1,
                        descri: '测试描述1',
                        name: '描述名称1',
                        content: ''
                    },
                    {
                        descriptionId: 2,
                        descri: '测试描述2',
                        name: '描述名称2',
                        content: ''
                    }
                ],
                BZ_point: 0, //本职技能点
                XQ_point: 0, //兴趣技能点
                TL: 0, //体力
                ML: 0, //魔力
                LZ: 0, //理智
                SHJZ: '' //伤害加值
            },
            table_data: [{
                name: '信用评级',
                numDefault: 0,
                numPro: 0,
                numHobby: 0,
                numLearn: 0
            }]
        };
    },
    watch: {
        // ruleForm:{
        //     handler:function(val){
        //         console.log(val.STR)
        //         this.ruleForm.SUM=val.STR+val.CON+val.SIZ+ val.DEX+val.APP+ val.INT+val.POW+ val.EDU+val.LUCK;
        //     }
        // }
    },
    methods: {
        handleTabsClick(tab, event) {
            console.log(tab.name);
            this.table_data = this.ruleForm.skill[tab.name];
        },
        onSubmit() {
            this.ruleForm.attribute_List=[
                {
                    name:'力量',
                    num:this.ruleForm.STR,
                },
                {
                    name:'体质',
                    num:this.ruleForm.CON,
                },
                {
                    name:'体型',
                    num:this.ruleForm.SIZ,
                },
                {
                    name:'敏捷',
                    num:this.ruleForm.DEX,
                },
                {
                    name:'外貌',
                    num:this.ruleForm.APP,
                },
                {
                    name:'智力',
                    num:this.ruleForm.INT,
                },
                {
                    name:'意志',
                    num:this.ruleForm.POW,
                },
                {
                    name:'教育',
                    num:this.ruleForm.EDU,
                },
                {
                    name:'幸运',
                    num:this.ruleForm.LUCK,
                },
                {
                    name:'血量',
                    num:this.ruleForm.TL,
                },
                {
                    name:'魔力',
                    num:this.ruleForm.ML,
                },
                {
                    name:'理智',
                    num:this.ruleForm.LZ,
                },
            ]
            this.ruleForm.ability_list=this.ruleForm.ability_list.concat(this.ruleForm.skill.fight)
            this.ruleForm.ability_list=this.ruleForm.ability_list.concat(this.ruleForm.skill.search)
            this.ruleForm.ability_list=this.ruleForm.ability_list.concat(this.ruleForm.skill.communicate)
            this.ruleForm.ability_list=this.ruleForm.ability_list.concat(this.ruleForm.skill.knowledge)
            this.ruleForm.ability_list=this.ruleForm.ability_list.concat(this.ruleForm.skill.skill)
            this.ruleForm.ability_list=this.ruleForm.ability_list.concat(this.ruleForm.skill.move)
            this.ruleForm.ability_list=this.ruleForm.ability_list.concat(this.ruleForm.skill.medical)
            console.log(this.ruleForm);
            axios.post(
                axios.defaults.baseURL + 'character/create/' + localStorage.getItem('uid'),
                this.ruleForm
            ).then((res) => {
                if (res.data.code === '000000') {
                    this.$message.success('上传成功');
                    this.ruleForm = {

                        uid: localStorage.getItem('uid'),
                        c_name: '',
                        home: "",
                        resident: "",
                        sex: "",
                        time: "",
                        age:"",
                        STR: 0,
                        CON: 0,
                        SIZ: 0,
                        DEX: 0,
                        APP: 0,
                        INT: 0,
                        POW: 0,
                        EDU: 0,
                        LUCK: 0,
                        SUM: 0,
                        attribute_list:[],
                        ability_list:[],
                        skill: {
                            communicate: [{
                                name: '信用评级',
                                numDefault: 0,
                                numPro: 0,
                                numHobby: 0,
                                numLearn: 0
                            },
                                {
                                    name: '魅惑',
                                    numDefault: 15,
                                    numPro: 0,
                                    numHobby: 0,
                                    numLearn: 0
                                },
                                {
                                    name: '话术',
                                    numDefault: 5,
                                    numPro: 0,
                                    numHobby: 0,
                                    numLearn: 0
                                },
                                {
                                    name: '恐吓',
                                    numDefault: 15,
                                    numPro: 0,
                                    numHobby: 0,
                                    numLearn: 0
                                },
                                {
                                    name: '说服',
                                    numDefault: 10,
                                    numPro: 0,
                                    numHobby: 0,
                                    numLearn: 0
                                },
                                {
                                    name: '心理学',
                                    numDefault: 10,
                                    numPro: 0,
                                    numHobby: 0,
                                    numLearn: 0
                                }],
                            search: [{
                                name: '估价',
                                numDefault: 5,
                                numPro: 0,
                                numHobby: 0,
                                numLearn: 0
                            },
                                {
                                    name: '乔装',
                                    numDefault: 5,
                                    numPro: 0,
                                    numHobby: 0,
                                    numLearn: 0
                                },
                                {
                                    name: '潜行',
                                    numDefault: 20,
                                    numPro: 0,
                                    numHobby: 0,
                                    numLearn: 0
                                },
                                {
                                    name: '追踪',
                                    numDefault: 10,
                                    numPro: 0,
                                    numHobby: 0,
                                    numLearn: 0
                                },
                                {
                                    name: '侦查',
                                    numDefault: 25,
                                    numPro: 0,
                                    numHobby: 0,
                                    numLearn: 0
                                },
                                {
                                    name: '聆听',
                                    numDefault: 20,
                                    numPro: 0,
                                    numHobby: 0,
                                    numLearn: 0
                                },
                                {
                                    name: '读唇',
                                    numDefault: 1,
                                    numPro: 0,
                                    numHobby: 0,
                                    numLearn: 0
                                },
                                {
                                    name: '人类学',
                                    numDefault: 1,
                                    numPro: 0,
                                    numHobby: 0,
                                    numLearn: 0
                                }],
                            move: [{
                                name: '攀爬',
                                numDefault: 20,
                                numPro: 0,
                                numHobby: 0,
                                numLearn: 0
                            },
                                {
                                    name: '跳跃',
                                    numDefault: 20,
                                    numPro: 0,
                                    numHobby: 0,
                                    numLearn: 0
                                },
                                {
                                    name: '骑乘',
                                    numDefault: 5,
                                    numPro: 0,
                                    numHobby: 0,
                                    numLearn: 0
                                },
                                {
                                    name: '游泳',
                                    numDefault: 20,
                                    numPro: 0,
                                    numHobby: 0,
                                    numLearn: 0
                                },
                                {
                                    name: '潜水',
                                    numDefault: 1,
                                    numPro: 0,
                                    numHobby: 0,
                                    numLearn: 0
                                }],
                            skill: [{
                                name: '妙手',
                                numDefault: 10,
                                numPro: 0,
                                numHobby: 0,
                                numLearn: 0
                            },
                                {
                                    name: '锁匠',
                                    numDefault: 1,
                                    numPro: 0,
                                    numHobby: 0,
                                    numLearn: 0
                                },
                                {
                                    name: '电气维修',
                                    numDefault: 10,
                                    numPro: 0,
                                    numHobby: 0,
                                    numLearn: 0
                                },
                                {
                                    name: '机械维修',
                                    numDefault: 10,
                                    numPro: 0,
                                    numHobby: 0,
                                    numLearn: 0
                                },
                                {
                                    name: '导航',
                                    numDefault: 10,
                                    numPro: 0,
                                    numHobby: 0,
                                    numLearn: 0
                                },
                                {
                                    name: '汽车驾驶',
                                    numDefault: 20,
                                    numPro: 0,
                                    numHobby: 0,
                                    numLearn: 0
                                },
                                {
                                    name: '操作重型机械',
                                    numDefault: 1,
                                    numPro: 0,
                                    numHobby: 0,
                                    numLearn: 0
                                },
                                {
                                    name: '驯兽',
                                    numDefault: 5,
                                    numPro: 0,
                                    numHobby: 0,
                                    numLearn: 0
                                },
                                {
                                    name: '计算机使用',
                                    numDefault: 5,
                                    numPro: 0,
                                    numHobby: 0,
                                    numLearn: 0
                                }],
                            fight: [{
                                name: '闪避',
                                numDefault: 20,
                                numPro: 0,
                                numHobby: 0,
                                numLearn: 0
                            },
                                {
                                    name: '投掷',
                                    numDefault: 20,
                                    numPro: 0,
                                    numHobby: 0,
                                    numLearn: 0
                                },
                                {
                                    name: '爆破',
                                    numDefault: 1,
                                    numPro: 0,
                                    numHobby: 0,
                                    numLearn: 0
                                },
                                {
                                    name: '炮术',
                                    numDefault: 1,
                                    numPro: 0,
                                    numHobby: 0,
                                    numLearn: 0
                                },
                                {
                                    name: '格斗',
                                    numDefault: 20,
                                    numPro: 0,
                                    numHobby: 0,
                                    numLearn: 0
                                },
                                {
                                    name: '射击',
                                    numDefault: 20,
                                    numPro: 0,
                                    numHobby: 0,
                                    numLearn: 0
                                }],
                            medical: [{
                                name: '急救',
                                numDefault: 30,
                                numPro: 0,
                                numHobby: 0,
                                numLearn: 0
                            },
                                {
                                    name: '医学',
                                    numDefault: 1,
                                    numPro: 0,
                                    numHobby: 0,
                                    numLearn: 0
                                },
                                {
                                    name: '精神分析',
                                    numDefault: 1,
                                    numPro: 0,
                                    numHobby: 0,
                                    numLearn: 0
                                },
                                {
                                    name: '催眠',
                                    numDefault: 1,
                                    numPro: 0,
                                    numHobby: 0,
                                    numLearn: 0
                                }],
                            knowledge: [{
                                name: '会计',
                                numDefault: 5,
                                numPro: 0,
                                numHobby: 0,
                                numLearn: 0
                            },
                                {
                                    name: '法律',
                                    numDefault: 5,
                                    numPro: 0,
                                    numHobby: 0,
                                    numLearn: 0
                                },
                                {
                                    name: '历史',
                                    numDefault: 5,
                                    numPro: 0,
                                    numHobby: 0,
                                    numLearn: 0
                                },
                                {
                                    name: '考古学',
                                    numDefault: 1,
                                    numPro: 0,
                                    numHobby: 0,
                                    numLearn: 0
                                },
                                {
                                    name: '自然学',
                                    numDefault: 10,
                                    numPro: 0,
                                    numHobby: 0,
                                    numLearn: 0
                                },
                                {
                                    name: '神秘学',
                                    numDefault: 5,
                                    numPro: 0,
                                    numHobby: 0,
                                    numLearn: 0
                                },
                                {
                                    name: '电子学',
                                    numDefault: 1,
                                    numPro: 0,
                                    numHobby: 0,
                                    numLearn: 0
                                },
                                {
                                    name: '克苏鲁神话',
                                    numDefault: 0,
                                    numPro: 0,
                                    numHobby: 0,
                                    numLearn: 0
                                }]
                        },
                        desc_form: [
                            {
                                descriptionId: 1,
                                descri: '测试描述1',
                                name: '描述名称1',
                                content: ''
                            },
                            {
                                descriptionId: 2,
                                descri: '测试描述2',
                                name: '描述名称2',
                                content: ''
                            }
                        ],
                        BZ_point: 0, //本职技能点
                        XQ_point: 0, //兴趣技能点
                        TL: 0, //体力
                        ML: 0, //魔力
                        LZ: 0, //理智
                        SHJZ: '' //伤害加值
                    }
                } else {
                    this.$message.error(res.data.desc);
                }
            });
        },
        updateValue: function(e) {
            this.ruleForm.desc_form[i].content = e.target.value;
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        random(min, max, time) {
            var count = 0;
            for (var i = 0; i < time; i++) {
                count += Math.floor(Math.random() * (max - min + 1) + min);
            }
            return count;
        },
        randomCharacter() {
            this.ruleForm.STR = 5 * this.random(1, 6, 3);
            this.ruleForm.CON = 5 * this.random(1, 6, 3);
            this.ruleForm.SIZ = 5 * this.random(1, 6, 3);
            this.ruleForm.DEX = 5 * this.random(1, 6, 3);
            this.ruleForm.APP = 5 * this.random(1, 6, 3);
            this.ruleForm.INT = 5 * this.random(1, 6, 3);
            this.ruleForm.POW = 5 * this.random(1, 6, 3);
            this.ruleForm.EDU = 5 * this.random(1, 6, 3);
            this.ruleForm.LUCK = 5 * this.random(1, 6, 3);
            this.handleChange();
        },
        handleChange() {
            this.ruleForm.SUM = this.ruleForm.STR + this.ruleForm.CON + this.ruleForm.SIZ +
                this.ruleForm.DEX + this.ruleForm.APP + this.ruleForm.INT + this.ruleForm.POW +
                this.ruleForm.EDU + this.ruleForm.LUCK;
            this.ruleForm.BZ_point = this.ruleForm.EDU * 4;
            this.ruleForm.XQ_point = this.ruleForm.INT * 2;
            this.ruleForm.TL = this.ruleForm.CON + this.ruleForm.SIZ;
            this.ruleForm.ML = Math.floor(this.ruleForm.POW / 5);
            this.ruleForm.LZ = this.ruleForm.POW;
            if (this.ruleForm.STR >= 25 && this.ruleForm.STR <= 69) {
                this.ruleForm.SHJZ = '1D4';
            } else if (this.ruleForm.STR >= 70) {
                this.ruleForm.SHJZ = '1D6';
            }
            this.ruleForm.skill.communicate.forEach((item, i) => {
                this.ruleForm.BZ_point = this.ruleForm.BZ_point - item.numPro;
            });
            this.ruleForm.skill.search.forEach((item, i) => {
                this.ruleForm.BZ_point = this.ruleForm.BZ_point - item.numPro;
            });
            this.ruleForm.skill.move.forEach((item, i) => {
                this.ruleForm.BZ_point = this.ruleForm.BZ_point - item.numPro;
            });
            this.ruleForm.skill.skill.forEach((item, i) => {
                this.ruleForm.BZ_point = this.ruleForm.BZ_point - item.numPro;
            });
            this.ruleForm.skill.fight.forEach((item, i) => {
                this.ruleForm.BZ_point = this.ruleForm.BZ_point - item.numPro;
            });
            this.ruleForm.skill.medical.forEach((item, i) => {
                this.ruleForm.BZ_point = this.ruleForm.BZ_point - item.numPro;
            });
            this.ruleForm.skill.knowledge.forEach((item, i) => {
                this.ruleForm.BZ_point = this.ruleForm.BZ_point - item.numPro;
            });
            this.ruleForm.skill.communicate.forEach((item, i) => {
                this.ruleForm.XQ_point = this.ruleForm.XQ_point - item.numHobby;
            });
            this.ruleForm.skill.search.forEach((item, i) => {
                this.ruleForm.XQ_point = this.ruleForm.XQ_point - item.numHobby;
            });
            this.ruleForm.skill.move.forEach((item, i) => {
                this.ruleForm.XQ_point = this.ruleForm.XQ_point - item.numHobby;
            });
            this.ruleForm.skill.skill.forEach((item, i) => {
                this.ruleForm.XQ_point = this.ruleForm.XQ_point - item.numHobby;
            });
            this.ruleForm.skill.fight.forEach((item, i) => {
                this.ruleForm.XQ_point = this.ruleForm.XQ_point - item.numHobby;
            });
            this.ruleForm.skill.medical.forEach((item, i) => {
                this.ruleForm.XQ_point = this.ruleForm.XQ_point - item.numHobby;
            });
            this.ruleForm.skill.knowledge.forEach((item, i) => {
                this.ruleForm.XQ_point = this.ruleForm.XQ_point - item.numHobby;
            });
        }
    },
    created() {
        //获得描述列表
        axios.post(
            axios.defaults.baseURL + ''
        ).then((res) => {
            if (res.code === '000000') {
                let get_form = res.content;
                get_form.forEach((item, i) => {
                    let c_form = {
                        descriptionId: item.descriptionId,
                        descri: item.descri,
                        name: item.name,
                        content: ''
                    };
                    this.ruleForm.desc_form.push(c_form);
                });
            } else {
                this.$message.error(res.desc);
            }
        });
    }

};
</script>

<style scoped>
.example-p {
    height: 45px;
    display: flex;
    align-items: center;
}

.search-box {
    text-align: center;
    margin-top: 10px;
}

.search {
    width: 300px;
}

ul, li {
    list-style: none;
}

.icon-li {
    display: inline-block;
    padding: 10px;
    width: 120px;
    height: 120px;
}

.icon-li-content {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.icon-li-content i {
    font-size: 36px;
    color: #606266;
}

.icon-li-content span {
    margin-top: 10px;
    color: #787878;
}
</style>